import React from 'react';
import ReactDOM from 'react-dom';
// import {Provider,connect} from 'react-redux'
import {Provider,connect} from './myReactRedux'
import store from './store/index'

class App extends React.Component {
    constructor() {
        super();
        
    }
    add = ()=>{
      this.props.dispatch({type:'add',num:10})
    }
    minus= ()=>{
      this.props.dispatch((dispatch)=>{
        setTimeout(() => {
          dispatch({type:'minus',num:10})
        }, 1000);
      })
      // this.setState({})
    }
    
    
    render() {
      
        return <div className='' style={{color:this.props.colorReducer.color}}>
            <h1>{this.props.countReducer.count}</h1>
            <button onClick={this.add}>+</button>
            <button onClick={this.minus}>-</button>
        </div>;
    }
}
App = connect((state)=>{
  return {
    ...state
  }
},(dispatch)=>{
  return {
    dispatch
  }
})(App)

ReactDOM.render(<Provider store={store}>
  <App/>
</Provider>,document.getElementById('root'))